<template>
  <div v-if="creatingDependency" class="dependency-creator">
    <div class="creator-content">
      <div class="creator-header">
        <h4>创建依赖关系</h4>
        <el-button circle size="small" @click="cancel">
          <el-icon><close /></el-icon>
        </el-button>
      </div>

      <div class="creator-steps">
        <div class="step">
          <div class="step-label">从</div>
          <div class="step-post">
            {{ sourcePost?.title || '未知文章' }}
          </div>
        </div>

        <div class="step">
          <div class="step-label">到</div>
          <el-select v-model="targetPostId" placeholder="选择目标文章" filterable>
            <el-option
              v-for="post in availablePosts"
              :key="post.id"
              :label="post.title"
              :value="post.id"
            />
          </el-select>
        </div>

        <div class="step">
          <div class="step-label">关系类型</div>
          <el-select v-model="relationType" placeholder="选择关系类型">
            <el-option
              v-for="type in relationTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
          <dependency-help class="ml-2" />
        </div>
      </div>

      <div class="creator-actions">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" :disabled="!targetPostId || !relationType" @click="confirm">
          确认
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useGanttStore } from '@/store/modules/ganttStore';
import { Close } from '@element-plus/icons-vue';
import DependencyHelp from './DependencyHelp.vue';

const store = useGanttStore();
const targetPostId = ref<string | null>(null);
const relationType = ref<string>('finish-to-start');

const relationTypes = [
  {
    value: 'finish-to-start',
    label: '完成-开始 (FS)'
  },
  {
    value: 'start-to-start',
    label: '开始-开始 (SS)'
  },
  {
    value: 'finish-to-finish',
    label: '完成-完成 (FF)'
  },
  {
    value: 'start-to-finish',
    label: '开始-完成 (SF)'
  }
];

const creatingDependency = computed(() => store.creatingDependency.sourceId !== null);
const sourcePost = computed(() =>
  store.posts.find(p => p.id === store.creatingDependency.sourceId)
);

const availablePosts = computed(() =>
  store.posts.filter(
    p =>
      p.id !== store.creatingDependency.sourceId &&
      !store.dependencies.some(
        d => d.sourcePost === store.creatingDependency.sourceId && d.targetPost === p.id
      )
  )
);

const cancel = () => {
  store.cancelDependencyCreation();
  targetPostId.value = null;
  relationType.value = 'finish-to-start';
};

const confirm = async () => {
  if (!store.creatingDependency.sourceId || !targetPostId.value || !relationType.value) return;

  try {
    await store.saveDependency({
      sourcePost: store.creatingDependency.sourceId,
      targetPost: targetPostId.value,
      relationType: relationType.value
    });

    // 触发刷新甘特图
    window.dispatchEvent(new CustomEvent('gantt-dependency-added'));
  } catch (error) {
    console.error('Failed to create dependency:', error);
  } finally {
    cancel();
  }
};
</script>

<style scoped>
.dependency-creator {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.creator-content {
  background-color: white;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 24rem;
}

.creator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.creator-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step {
  display: flex;
  align-items: center;
}

.step-label {
  width: 4rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.step-post {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.creator-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
  gap: 0.5rem;
}
</style>
